<template>
  <div>
    <div class="messageHeader">
      <div style='float:left;margin-top:5px;'>
        <span style="margin-left:10px;">类别：</span>
      </div>
      <div>
        <el-select style='float:left;width:100px;' v-model="value" placeholder="请选择" size="small">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div style='float:left;margin-top:5px;;margin-left:10px'>
        <span>状态：</span>
      </div>
      <div>
        <el-select style='float:left;width:100px;' v-model="value" placeholder="请选择" size="small">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div style='float:left;margin-top:5px;;margin-left:10px;'>
        <span>发送时间：</span>
      </div>
      <div style='float:left'>
        <el-date-picker v-model="value4" type="daterange" size='small' range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" class="float:left;width:200px;"></el-date-picker>
      </div>
      <div style='float:left;margin-left:10px'>
        <el-button style="background-color:#01b59c;color:white;" round size="small">查询</el-button>
      </div>
      <div style='float:left;margin-left:10px'>
        <el-button style="background-color:#01b59c;color:white;" round size="small">全部标记已读</el-button>
      </div>
      <div style='float:left;margin-left:10px'>
        <el-button style="background-color:#01b59c;color:white;" round size="small">批量删除</el-button>
      </div>
    </div>
    <el-table header-row-class-name="el-table-header-class" ref="multipleTable" height="600" :data="tableData3" tooltip-effect="dark" style="width: 100%;margin-top:20px" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="类别" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="标题" width="120">
      </el-table-column>
      <el-table-column prop="address" label="内容" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="address" label="状态" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="address" label="发送时间" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width:200px;margin:auto;margin-top:20px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage3" :page-size="100" layout="prev, pager, next, jumper" :total="1000" style="width:200px;margin:0,auto">
      </el-pagination>
    </div>
  </div>
</template>
<style>
.el-table__header-wrapper th{
  background-color: #09b59c;
  border-right: 1px #ffffff solid;
  color: white
}
.messageHeader {
  height: 50px;
  width: 100%;
}

.messageHeader::after {
  content: '';
  display: block;
  clear: both;
}
</style>
<script>
export default {
  data: function() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      tableData3: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },
  methods: {
    handleClick: function(arg) {
      this.$router.push({ path: 'mine/detail' })
    }
  }
}
</script>
